{% extends base_layout %}

{% block header_title %}
    {% trans %}Login{% endtrans %}
{% endblock %}

{% block content %}
    <form id="form_login_user" action="{{ url|safe }}" method="post" class="well form-vertical auth-at-loginpage">
        <fieldset>
            <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
            {{ macros.field(form.username, label=_("Username or Email"), placeholder=_("Enter your")+" "+_("Username or Email"), class="input-xlarge focused required") }}
            {{ macros.field(form.password, label=_("Password"), placeholder=_("Enter your")+" "+_("Password"), class="input-xlarge focused required", type="password") }}
            <div class="control-group">
                <div class="controls">
                    <button type="submit" class="btn btn-primary btn-login">{% trans %}Login{% endtrans %}</button>
                    <label class="remember">
                        <input type="checkbox" name="remember_me" id="remember_me" value="on">
                        {% trans %}Remember me?{% endtrans %}
                    </label>
                </div>
            </div>
            <div class="control-group">
                <a href="{{ uri_for("password-reset") }}">{% trans %}Forgot your password?{% endtrans %}</a>
            </div>
            {{ macros.federated_login(provider_info, provider_uris, enable_federated_login) }}
            <div id="register" class="form-actions">
                <h4>{% trans %}Don't have an account?{% endtrans %}</h4>
               	<a href="{{ uri_for("register") }}" class="btn btn-primary btn-login">{% trans %}Sign Up{% endtrans %}</a>
            </div>
        </fieldset>
    </form>
{% endblock %}

{% block mediaJS %}
    <script type="text/javascript">
        $().ready(function() {
            $("#form_login_user").validate({
                submitHandler: function(form) {
                          form.submit();
                },
                errorPlacement: function(error, element) {
                    element.parent().parent().addClass("error");
                    error.addClass("help-inline").appendTo( element.parent() );
                }
            });
        });
    </script>
{% endblock %}